<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div id="root">
<Demo></Demo>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    /*全局过滤器*/
    Vue.filter('dateFormater',function (value,str='YYYY年-MM月-DD日'){
        return moment(value).format(str)
    })
    //定义一个事件组件Demo
    const Demo=Vue.extend({
        // template:`<div>当前的日期为:{{fmtTime}}</div>`,
        template:`
        <div>
         <h2>当前是:{{time|dateFormater('YYYY-MM-DD')}}</h2>
         <h2>当前是:{{time|dateFormater('YYYY年-MM月-DD日')}}</h2>
         <h2>当前是:{{time|dateFormater('YYYY%MM%DD')}}</h2>
         <h2>当前是:{{time|dateFormater}}</h2>
        </div>

        `,
        data(){
            return {
                time:Date.now(),
                fmtTime:''
            }
        },

        //过滤器实现 局部过滤器
     filters:{
            dateFormater(value,str='YYYY年-MM-月DD日'){
                return moment(value).format(str)
            }
        }
        //computed方法实现
       // computed: {
       //      fmtTime() {
       //          return moment(this.time).format('YYYY-MM-DD')
       //      }
       //  }
        //watch实现
        // watch:{
        //     time:{
        //         immediate:true,
        //         handler(){
        //             this.fmtTime=moment(this.time).format('YYYY-MM-DD')
        //         }
        //     }
        // }
    })
    new Vue({
        el:"#root",
      components:{Demo}
    })
</script>
</body>
</html>




